<script>
  const client = new Keen({
    projectId: "5368fa5436bf5a5623000000",
    readKey: "3f324dcb5636316d6865ab0ebbbbc725224c7f8f3e8899c7733439965d6d4a2c7f13bf7765458790bd50ec76b4361687f51cf626314585dc246bb51aeb455c0a1dd6ce77a993d9c953c5fc554d1d3530ca5d17bdc6d1333ef3d8146a990c79435bb2c7d936f259a22647a75407921056"
  });

  Keen.ready(function () {

    // ----------------------------------------
    // Sample one
    // ----------------------------------------

    const pageviews_timeline = client.query('count', {
      eventCollection: "pageviews",
      interval: "hourly",
      groupBy: "user.device_info.browser.family",
      timeframe: {
        start: "2014-05-04T00:00:00.000Z",
        end: "2014-05-05T00:00:00.000Z"
      }
    });

    client.run([pageviews_timeline])
      .then(res => {
        const chart = new KeenDataviz({
            container: '#chart-01',
            type: 'area'
          })
          .data(res)
          .render();
      })
    // ----------------------------------------
    //  End sample one
    // ----------------------------------------


    // ----------------------------------------
    // Sample two
    // ----------------------------------------

    const pageviews_static = client.query('count', {
      eventCollection: "pageviews",
      groupBy: "user.device_info.browser.family",
      timeframe: {
        start: "2014-05-01T00:00:00.000Z",
        end: "2014-05-05T00:00:00.000Z"
      }
    });

    client.run([pageviews_static])
      .then(res => {
        const chart = new KeenDataviz({
            container: '#chart-02',
            type: 'pie'
          })
          .data(res)
          .render();
      })
    // ----------------------------------------
    // End sample two
    // ----------------------------------------

    // ----------------------------------------
    // Sample three
    // ----------------------------------------

    const impressions_timeline = client.query('count', {
      eventCollection: "impressions",
      groupBy: "ad.advertiser",
      interval: "hourly",
      timeframe: {
        start: "2014-05-04T00:00:00.000Z",
        end: "2014-05-05T00:00:00.000Z"
      }
    });

    client.run([impressions_timeline])
      .then(res => {
        const chart = new KeenDataviz({
            container: '#chart-03',
            type: 'bar',
            stacked: true
          })
          .data(res)
          .render();
      });

    // ----------------------------------------
    // End sample three
    // ----------------------------------------

    // ----------------------------------------
    // Sample four
    // ----------------------------------------

    const impressions_timeline_by_device = client.query('count', {
      eventCollection: "impressions",
      groupBy: "user.device_info.device.family",
      interval: "hourly",
      timeframe: {
        start: "2014-05-04T00:00:00.000Z",
        end: "2014-05-05T00:00:00.000Z"
      }
    });

    client.run([impressions_timeline_by_device])
      .then(res => {
        const chart = new KeenDataviz({
            container: '#chart-04',
            type: 'bar',
            stacked: true,
            bar: {
              width: 100
            }
          })
          .data(res)
          .render();
      });

    // ----------------------------------------
    // End sample four
    // ----------------------------------------

    // ----------------------------------------
    // Sample five
    // ----------------------------------------

    const impressions_timeline_by_country = client.query('count', {
      eventCollection: "impressions",
      groupBy: "user.geo_info.country",
      interval: "hourly",
      timeframe: {
        start: "2014-05-04T00:00:00.000Z",
        end: "2014-05-05T00:00:00.000Z"
      }
    });

    client.run([impressions_timeline_by_country])
      .then(res => {
        const chart = new KeenDataviz({
            container: '#chart-05',
            type: 'bar',
            stacked: true,
            bar: {
              width: {
                ratio: 0.85
              }
            }
          })
          .data(res)
          .render();
      });

    // ----------------------------------------
    // End sample five
    // ----------------------------------------

  });
</script>